<%@ page import="rwt.server.util.JspUtil.SwitchStateData,java.util.*" %>

<!DOCTYPE html>
<html>
<head>
<title>Simple Switch</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="/css/style.css" />
<script src="/rwt/websock.js"></script>
	<script src="/jquery/jquery-1.8.2.min.js"></script>
	<script src="/jquery/jquery.ui.core.js"></script>
	
	<script>
		function handleMessage(obj)
		{
			var state = "";
			switch(obj.state)
			{
			case SWITCH_BEGIN_THROWN:
			case SWITCH_BEGIN_CLOSED:
				state = "changing";
				break;
			case SWITCH_CLOSED:
				state = "closed";
				break;
			case SWITCH_THROWN:
				state = "thrown";
				break;
			case SWITCH_UNKNOWN:
			default:
				state = "unknown";
				break;
			}
			$('#switch' + obj.switchId).attr("state", state);
		}
		
		switches = new Switches(handleMessage);
	</script>
</head>
<body class="dialog">
<table>
<tr><td>
<div class="simple_switches">
	<%
		List<SwitchStateData> switchStateList = (List<SwitchStateData>) request.getAttribute("rwt.switchStateData"); 
		for (SwitchStateData switchState : switchStateList)
		{
	%>
	<div id="switch<%=switchState.switchId%>" state="unknown" onclick="$('#switch<%=switchState.switchId%>').attr('state','changing');switches.changeSwitch(<%=switchState.switchId%>)"><%=switchState.switchId%></div>
	<% } %>
</div>
</td><td>
<table>
<tr>
<td><div style="width:30px;height:20px;border-color:darkgreen;background-color:lightgreen;"></div></td>
<td>Closed</td>
</tr>
<tr>
<td><div style="width:30px;height:20px;border-color:darkred;background-color:pink;"></div></td>
<td>Thrown</td>
</tr>
<tr>
<td><div style="width:30px;height:20px;border-color:darkorange;background-color:yellow;"></div></td>
<td>Changing</td>
</tr>
<tr>
<td><div style="width:30px;height:20px;background-color:#ddd;"></div></td>
<td>Unknown</td>
</tr>
</table>
</td></tr></table>
</body>
</html>